<template>
  <div class="login">
    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">登录</h3>
      <el-form-item prop="username">
        <el-input
            v-model="loginForm.username"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="账号"
        >
          <template #prefix>
            <svg t="1720436631591" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10608" width="20" height="20"><path d="M508.6 63.8c16.5 0 33.1 0 49.6 5.5s33.1 11 49.6 16.5 27.6 16.5 38.6 22.1c11 11 22.1 16.5 27.6 27.6 16.5 22.1 27.6 38.6 33.1 66.2 5.5 22.1 11 44.1 16.5 66.2s5.5 49.6 5.5 71.7l11 11c0 5.5 5.5 11 5.5 16.5v22.1c0 11-5.5 22.1-5.5 27.6-5.5 5.5-5.5 11-11 16.5s-11 5.5-16.5 11c-5.5 11-5.5 22.1-11 27.6s-5.5 16.5-11 22.1c-5.5 5.5-5.5 11-11 16.5-11 11-22.1 16.5-27.6 22.1-5.5 5.5-11 16.5-16.5 33.1v27.6c0 11.1 5.5 16.5 5.5 27.6 5.5 11 11 16.5 22.1 27.6s22.1 16.5 38.6 22.1c16.5 5.5 33.1 11 49.6 16.5s33.1 11 49.6 16.5 33.1 16.5 44.1 22.1c11 11 22.1 22.1 27.6 38.6 5.5 11 5.5 22.1 5.5 33.1v44.1c0 16.5 0 27.6-5.5 38.6 0 11-5.5 22.1-11 27.6s-11 11-27.6 11-33.1 11-49.6 11c-22.1 5.5-44.1 5.5-66.2 11-27.6 5.5-49.6 5.5-77.2 5.5s-49.6 5.5-71.7 5.5H447.9c-22.1 0-44.1-5.5-71.7-5.5-22.1 0-49.6-5.5-71.7-5.5s-44.1-5.5-66.2-11-38.6-5.5-49.6-11-22.1-5.5-27.6-11-11-22.1-11-44.1c-5.5-22.1 0-55.2 5.5-93.8 5.5-22.1 11-38.6 27.6-49.6 16.5-11 33.1-22.1 49.6-27.6s38.6-11 60.7-16.5 38.6-11 55.2-22.1c11-5.5 22.1-16.5 27.6-22.1 5.5-5.5 11-16.5 16.5-22.1 5.5-5.5 5.5-16.5 5.5-22.1v-27.6c0-16.5-5.5-27.6-16.5-33.1s-16.5-16.5-27.6-27.6c-5.5-5.5-11-11-11-16.5-5.5-5.5-5.5-16.5-11-22.1-5.5-11-5.5-16.5-11-27.6-5.5 0-5.5-5.5-11-5.5l-11-11c-5.5-5.5-5.5-11-11-22.1-5.5-11-5.5-22.1-5.5-27.6 0-11 0-16.5 5.5-22.1 0-5.5 5.5-11 11-16.5 0-22.1 0-44.1 5.5-66.2 0-16.5 5.5-38.6 11-60.7s16.5-44.1 27.6-60.7c11-16.5 22.1-33.1 38.6-38.6 16.5-11 27.6-16.5 44.1-27.6 16.5-5.5 27.6-11 44.1-11 10.9 0.2 27.5 0.2 38.5 0.2z" fill="#00AA88" p-id="10609"></path></svg>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
            v-model="loginForm.password"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="密码"
        >
          <template #prefix>
            <svg t="1720436690926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11763" width="20" height="20"><path d="M837.281684 929.199158H177.771789a95.717053 95.717053 0 0 1-97.468631-97.468632V386.640842a95.717053 95.717053 0 0 1 97.468631-97.468631h662.770527a95.717053 95.717053 0 0 1 97.468631 97.468631v445.089684a100.540632 100.540632 0 0 1-100.729263 97.468632zM177.771789 354.169263a30.693053 30.693053 0 0 0-32.498526 32.498526v445.089685a30.693053 30.693053 0 0 0 32.498526 32.498526h662.770527a30.693053 30.693053 0 0 0 32.498526-32.498526V386.640842a30.693053 30.693053 0 0 0-32.498526-32.498526z" fill="#208BB5" p-id="11764"></path><path d="M720.330105 328.165053a30.693053 30.693053 0 0 1-32.498526-32.498527A185.101474 185.101474 0 0 0 502.649263 110.484211a183.053474 183.053474 0 0 0-185.182316 185.182315 32.498526 32.498526 0 1 1-64.970105 0 250.179368 250.179368 0 0 1 500.33179 0 32.552421 32.552421 0 0 1-32.498527 32.498527z" fill="#208BB5" p-id="11765"></path><path d="M512.404211 659.536842a107.223579 107.223579 0 1 1 107.196631-107.196631 108.166737 108.166737 0 0 1-107.196631 107.196631z m0-149.450105a42.226526 42.226526 0 1 0 42.226526 42.226526 43.115789 43.115789 0 0 0-42.226526-42.226526z" fill="#83D2EA" p-id="11766"></path><path d="M512.377263 808.986947a68.581053 68.581053 0 0 1-71.464421-61.736421v-107.223579a32.498526 32.498526 0 0 1 64.970105 0v103.962948h12.988632v-103.962948a32.498526 32.498526 0 1 1 64.970105 0v107.223579a68.581053 68.581053 0 0 1-71.464421 61.736421z" fill="#83D2EA" p-id="11767"></path></svg>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
            v-model="loginForm.code"
            size="large"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
        >
          <template #prefix>
            <svg t="1720436878908" class="icon" viewBox="0 0 1092 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13981" width="20" height="20"><path d="M561.29536 927.709867c-128.375467 128.375467-336.5888 128.375467-464.861867 0a328.533333 328.533333 0 0 1-0.1024-464.861867c115.848533-115.848533 296.482133-126.737067 424.96-33.518933L940.550827 10.171733a34.577067 34.577067 0 1 1 48.9472 48.9472l-48.9472 48.9472 122.299733 122.299734a34.577067 34.577067 0 1 1-48.9472 48.9472L891.603627 157.013333l-73.386667 73.386667 122.333867 122.299733a34.577067 34.577067 0 1 1-48.9472 48.9472l-122.333867-122.333866-196.437333 196.437333c116.258133 129.024 112.708267 327.748267-11.502934 451.959467zM145.278293 511.7952a259.515733 259.515733 0 0 0 0 367.104 259.515733 259.515733 0 1 0 367.069867-367.104 259.515733 259.515733 0 0 0-367.069867 0z" fill="#FF5A68" p-id="13982"></path></svg>
          </template>
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode"  class="login-code-img" alt="验证码"/>
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width:100%;"
            @click.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <div style="float: right;" v-if="register">
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup >
import {getCurrentInstance, reactive, ref} from "vue";
import { ElMessage } from 'element-plus'
import {getCodeImg} from "@/api/userInfo"

import router from "@/router/index.js";
import {decrypt, encrypt} from "@/utils/jsencrypt.js";
import Cookies from "js-cookie";
import useUserStore from "@/stores/user.js";
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  //code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
const codeUrl = ref("");
// 注册开关
const register = ref(true);
const loginForm = reactive({
  username: Cookies.get("username"),
  password: Cookies.get("password")==null ? null : decrypt(Cookies.get("password")),
  code: "",
  uuid: "",
  rememberMe: true,
});


function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.data.img;
      loginForm.uuid = res.data.uuid;
    }
  });
}


async function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true;
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.rememberMe) {
        Cookies.set("username", loginForm.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.password), { expires: 30 });
        Cookies.set("rememberMe", loginForm.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
      // 调用action的登录方法
      userStore.login(loginForm).then(res => {
        if (res.data.code === 200){
          ElMessage.success("登录成功")
          router.push({ path:"/"});
        }else {
          ElMessage.error(res.data.msg)
          loading.value = false;
          loginForm.code = ''
          // 重新获取验证码
          if (captchaEnabled.value) {
            getCode();
          }
        }
      })

    }
  });

}

getCode()
</script>

<style lang='scss' scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("/qiao.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 40px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>